<template>
  <div class="skin">
    <span>切换样式</span>
    <span
      class="skin__item"
      :key="index"
      :style="{ color: item === skin ? 'lightskyblue' : 'inherit' }"
      v-for="(item, index) in skinList"
      @click="skin = item"
      >●</span
    >
  </div>
</template>

<script>
import { ref, watch } from "vue";

const skinList = [
  "intention__skin--after",
  "intention__skin--before",
  "intention__skin--none",
  "intention__skin--icon",
];
export default {
  name: "skin",
  props: {
    modelValue: Number,
  },
  setup(props, ctx) {
    const skin = ref(props.modelValue);
    watch(skin, (newVal) => {
      ctx.emit("update:modelValue", newVal);
    });
    watch(
      () => props.modelValue,
      (newVal) => {
        skin.value = newVal;
      }
    );
    return {
      skinList,
      skin,
    };
  },
};
</script>

<style scoped lang="less">
.skin {
  position: absolute;
  top: -60px;
  right: 10px;
  width: 165px;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 3;
  background: white;
  box-shadow: 10px 10px 10px whitesmoke;
  border: 1px whitesmoke solid;

  .skin__item {
    font-size: 18px;
    cursor: pointer;
  }

  &:after {
    content: "";
    display: block;
    position: absolute;
    right: 16px;
    top: 40px;
    width: 0;
    height: 0;
    border-top: 10px white solid;
    border-left: 10px transparent solid;
    border-right: 10px transparent solid;
  }
}
</style>
